import React from 'react'
var { Component, PropTypes } = React

class EventBubble extends Component {
  constructor(props) {
    super(props)

    this.state = {
      data: props.data
    }
  }

  componentDidMount() {

  }

  componentWillReceiveProps(nextProps) {
    if (this.props.data !== nextProps.data) {
      this.setState({
        data: nextProps.data
      })
    }
  }

  componentWillUnmount() {

  }

  handleClickTop(e) {
    console.log('top')
  }

  handleClick1(e) {
    console.log(111)
    //事件停止冒泡后，就不再向上层dom派发了
    //此时上层dom上绑定的相同事件将不再响应
    e.stopPropagation()
  }

  handleClick2(e) {
    console.log(222)
    e.stopPropagation()
  }

  handleTouchStart(i, e) {
    console.log('touchstart',i)
    e.stopPropagation()
  }

  handleTouchMove(i, e) {
    console.log('touchmove',i)
    e.stopPropagation()
  }

  handleTouchEnd(i, e) {
    console.log('touchend',i)
    e.stopPropagation()
  }

  render() {
    return (
      <div onClick={this.handleClickTop} className='rel w800 h600 bg-yellow'
        onTouchStart={this.handleTouchStart.bind(this, 3)}
        onTouchMove={this.handleTouchMove.bind(this, 3)}
        onTouchEnd={this.handleTouchEnd.bind(this, 3)}>
        <div className="abs w200 h200 z3 bg-red" onClick={this.handleClick1}
          onTouchStart={this.handleTouchStart.bind(this, 1)}
          onTouchMove={this.handleTouchMove.bind(this, 1)}
          onTouchEnd={this.handleTouchEnd.bind(this, 1)}></div>
        <div className="abs w300 h400 z1 bg-blue" onClick={this.handleClick2}
          onTouchStart={this.handleTouchStart.bind(this, 2)}
          onTouchMove={this.handleTouchMove.bind(this, 2)}
          onTouchEnd={this.handleTouchEnd.bind(this, 2)}></div>
      </div>
    )
  }
}

EventBubble.propTypes = {
  title: PropTypes.string,
  data: PropTypes.string,
  dispatch: PropTypes.func
};

EventBubble.defaultProps = {
  title: 'EventBubble'
};

export default EventBubble;

